import React from 'react';
import { Checkbox, Tree, Spin,Row,Col,Input } from 'antd';
import 'components/DBTable/index.less';
import './innerTree.less';
import ajax from '../../../utils/ajax';
import globalConfig from 'config.js';

import CheckboxAllGroup from './CheckboxAllGroup.js';

const TreeNode = Tree.TreeNode;
const CheckboxGroup = Checkbox.Group;

var _this;
var roleObj = {};
// let cpLock = false;
//角色管理 添加/编辑组件

class InnerTree extends React.Component {

    state = {
        preData: [], //树的数据
        loading: true,
        roleName: "",
    };

    constructor(props) {
        super(props);
        this.initCheckBoxData(this.props);
    }

    // componentDidMount() {
    //     const input = document.getElementById('rolInput');
    //     input.addEventListener('compositionstart', function(){
    //         cpLock = true;
    //     })
    //     input.addEventListener('compositionend', function(){
    //         cpLock = false;
    //     })
    // }

    onChange(checkedValues) {

        roleObj[this.name] = checkedValues;

        _this.props.parentHandleData(roleObj);
    }

    initCheckBoxData(props) {

        let url;
        url = `/${props.tableName}/get/`;
        if (props.modalState == props.modalActionState.Insert) {
            url += '-100';
        }
        else if (props.modalState == props.modalActionState.Update) {
            url += props.updateId;
        }

        ajax.post({
            url: url,
            success: function(res) {
                var roleData = [];
                if (res.data.role) {
                    roleData = res.data.role.permissionMap;
                    !!res.data.role.name && _this.setState({ roleName: res.data.role.name });
                }
                _this.setState({ preData: res.data.module.children });


                const data = _this.state.preData;

                const treeNode = data.map((node) => {
                    return (<TreeNode title={node.name} key={node.id} disabled>
                        {node.children.map(function(item) {
                            return (<TreeNode title={item.name} key={item.id} />);
                        })}

                    </TreeNode>);
                });

                const tree = <Tree defaultExpandAll>{treeNode}</Tree>;

                _this.setState({ tree: tree });

                var items =
                    {
                        defaultItems: ['view', 'save', 'edit', 'delete'],
                        allItems: [{ value: 'view' }, { value: 'save' }, { value: 'edit' }, { value: 'delete' }],
                        permissionMap: {}
                    };

                items.permissionMap = roleData;

                _this.items = items;
                var checkboxList = [];
                for (var item in items.permissionMap) {
                    var itemData = items.permissionMap[item];
                    checkboxList.push(<CheckboxAllGroup module={item} key={item}
                        onCheckChange={_this.onCheckChange}
                        defaultOptions={items.defaultItems} options={items.allItems} value={itemData} />);
                }
                _this.setState({ checkboxList: checkboxList, loading: false });
            }
        })
    }

    getSelectedPermission = () => {
        return this.items.permissionMap;
    }

    componentWillReceiveProps = (nextProps) => {
        this.initCheckBoxData(nextProps);
        // const currentRoleName = this.props.roleName;
        // const nextRoleName = nextProps.roleName;
        // if(currentRoleName === nextRoleName)
        // return
        // !!nextProps.roleName && this.setState({roleName: nextProps.roleName});
    }

    onCheckChange = (item) => {
        _this.items.permissionMap[item.module] = item.value;
    }

    updateRole =(e)=>{
        const roleName = e.target.value;
        this.setState(
            {roleName},
            this.getValue
        );
       
    }

    // inputOnChange = (e) => {
    //     if(!cpLock){
    //         this.updateRole(e);
    //     }else {
    //         const roleName = e.target.value;
    //         this.setState(
    //             {roleName},
    //         );
    //     }
    // }

    getValue = () => {
        const value = this.state.roleName;
        this.props.callback(value);
    }

    render() {
        _this = this;
        return (
            <div className="innerTreeCon">
                <div>
                    <Row>
                        <Col key='1' className="labelTitle" span={8}>角色名称:</Col>
                        <Col key='2' span={10}><Input id="rolInput" ref="roleName" onInput={this.updateRole} placeholder="请输入角色名称" value={this.state.roleName}/></Col>
                        {!this.props.hasValue && <Col key='3' className="verification" span={6}>{this.props.verification}</Col>}
                    </Row>
                </div>
                <div className="treeOpeCon">
                    <span key='1' className="treeTitle">读取</span>
                    <span key='2' className="treeTitle">创建</span>
                    <span key='3' className="treeTitle">修改</span>
                    <span key='4' className="treeTitle">删除</span>
                    <span key='5' className="treeTitle">全部</span>
                </div>
                <Spin spinning={this.state.loading}>
                    <div className="treeAside" key='treeAside'>
                        {this.state.tree}
                    </div>
                    <div className="treeSection" key='treeSection'>
                        {this.state.checkboxList}
                    </div>
                </Spin>
                <div className="clear"></div>
            </div>
        );

    }

}

export default InnerTree;
